<template>
  <ele-page flex-table :multi-card="false" hide-footer style="min-height: 420px">
    <ele-card flex-table :body-style="{ padding: '0 0 0 16px', overflow: 'hidden' }">
      <ele-split-panel ref="splitRef" flex-table size="280px"
        :custom-style="{ borderWidth: '0 1px 0 0', padding: '16px 0' }"
        :body-style="{ padding: '16px 16px 0 0', overflow: 'hidden' }" :style="{ height: '100%', overflow: 'visible' }">
        <div style="padding: 0 16px 12px 0;">
          <div class="menu__header">
            <span>菜单列表</span>
            <div>
              <el-button type="primary" size="small" plain @click="() => openMenuEdit()">新增</el-button>
              <el-icon size="large" @click="queryMenuInfo">
                <IconElRefreshRight />
              </el-icon>
            </div>
          </div>
          <div class="ele-scrollbar-hover ele-scrollbar-mini dict-tree">
            <el-tree ref="treeRef" :data="menuTree" highlight-current node-key="id" :props="{ label: 'name' }"
              :expand-on-click-node="false" @node-click="onNodeClick" />
          </div>
        </div>
        <ele-loading :loading="loading" :style="{ flex: 1, paddingRight: '16px', overflow: 'auto' }"></ele-loading>
        <template #body>
          <ele-card header="菜单详情">
            <template #extra>
              <el-button type="primary" plain @click="() => openMenuEdit(currentNode!)">编辑</el-button>
              <el-popconfirm :width="190" placement="top-end" title="确定要删除菜单吗?" @confirm="delMenu(currentNode!.id)">
                <template #reference>
                  <el-button type="danger" plain>删除</el-button>
                </template>
              </el-popconfirm>
            </template>
            <div class="table-wrapper">
              <table border="1" class="menu-info-table">
                <tbody>
                  <tr>
                    <td>菜单名称</td>
                    <td>{{ currentNode?.name }}</td>
                    <td>菜单类型</td>
                    <td>
                      <el-tag v-if="currentNode?.type == '0'" type="primary">目录</el-tag>
                      <el-tag v-else type="warning">菜单</el-tag>
                    </td>
                  </tr>
                  <tr>
                    <td>菜单状态</td>
                    <td>
                      <el-tag v-if="currentNode?.status == '1'" type="primary">启用</el-tag>
                      <el-tag v-else type="danger">禁用</el-tag>
                    </td>
                    <td>菜单组件类型</td>
                    <td>
                      <el-tag v-if="currentNode?.componentType == '0'" type="primary">组件</el-tag>
                      <el-tag v-else-if="currentNode?.componentType == '1'" type="warning">内链</el-tag>
                      <el-tag v-else type="success">外链</el-tag>
                    </td>
                  </tr>
                  <tr>
                    <td>路径码</td>
                    <td>{{ currentNode?.pathCode }}</td>
                    <td>路由路径</td>
                    <td>{{ currentNode?.path }}</td>
                  </tr>
                  <tr>
                    <td>是否隐藏</td>
                    <td>{{ currentNode?.hide == '0' ? '否' : '是' }}</td>
                    <td>缓存路由</td>
                    <td>
                      <el-tag v-if="currentNode?.keepAlive == '1'" type="primary">启用</el-tag>
                      <el-tag v-else type="danger">禁用</el-tag>
                    </td>
                  </tr>
                  <tr>
                    <td>排序</td>
                    <td>{{ currentNode?.sort }}</td>
                    <td>菜单组件地址</td>
                    <td>
                      {{ currentNode?.componentPath }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </ele-card>
          <ele-card header="按钮权限列表" :flexTable="true" :bodyStyle="{ paddingBottom: '20px' }">
            <template #extra>
              <el-button type="primary" plain @click="() => openButtonEdit()">新增</el-button>
              <el-button type="primary" plain @click="reload">刷新</el-button>
            </template>
            <ele-pro-table ref="tableRef" :datasource="datasource" :columns="columns" row-key="id" :tools="false"
              :table-style="{ height: '100%', }">
              <template #status="{ row }">
                <el-tag v-if="row.status == '0'" type="danger" effect="dark">禁用</el-tag>
                <el-tag v-else type="primary" effect="dark">启用</el-tag>
              </template>
              <template #actions="{ row }">
                <el-space>
                  <el-link type="primary" underline="never" @click="openButtonEdit(row)">
                    编辑
                  </el-link>
                  <el-divider direction="vertical" style="margin: 0" />
                  <el-popconfirm :width="190" placement="top-end" title="确定要删除权限吗?" @confirm="delButton(row.id)">
                    <template #reference>
                      <el-link type="danger" underline="never">删除</el-link>
                    </template>
                  </el-popconfirm>
                </el-space>
              </template>
            </ele-pro-table>
          </ele-card>
        </template>
      </ele-split-panel>
    </ele-card>
    <menuEdit v-model="showMenuEdit" :menuTree="menuTree" :data="currentMenu" @reload="queryMenuInfo" :current-node="currentNode"></menuEdit>
    <buttonEdit v-model="showButtonEdit" :data="currentButton" :menuId="currentNode ? currentNode.id : ''"
      @reload="reload">
    </buttonEdit>
  </ele-page>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { EleMessage, toTree, type EleProTable } from 'ele-admin-plus';
import type { Columns, DatasourceFunction, } from 'ele-admin-plus/es/ele-pro-table/types';
import type { ElTree } from 'element-plus';
import { queryList, queryAllTree } from '@/api/system/SysMenu';
import type { SysMenu } from "@/api/system/SysMenu/model"
import { del } from "@/api/system/SysMenu"
import { queryPage, del as delPer } from "@/api/system/SysPermission"
import type { SysPermission } from "@/api/system/SysPermission/model"
import menuEdit from './components/menuEdit.vue';
import buttonEdit from './components/buttonEdit.vue'


const loading = ref<boolean>(false)
const showMenuEdit = ref<boolean>(false)
const showButtonEdit = ref<boolean>(false)
const menuTree = ref<SysMenu[]>([])
const currentNode = ref<SysMenu | null>(null)
const currentMenu = ref<SysMenu | null>(null)
const currentButton = ref<SysPermission | null>(null)
const treeRef = ref<InstanceType<typeof ElTree> | null>(null);
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);

const columns = ref<Columns>([
  {
    prop: 'name',
    label: '名称',
    align: 'center',
    showOverflowTooltip: true
  },
  {
    prop: 'sort',
    label: '排序',
    align: 'center',
  },
  {
    prop: 'permCode',
    label: '权限路径码',
    align: 'center',
    showOverflowTooltip: true
  },
  {
    label: '状态',
    align: 'center',
    slot: 'status',
    showOverflowTooltip: true
  },
  {
    prop: 'comment',
    label: '备注',
    align: 'center',
    showOverflowTooltip: true
  },
  {
    label: '操作',
    align: 'center',
    slot: 'actions',
    showOverflowTooltip: true
  },
]);

const datasource: DatasourceFunction = async ({ page, limit }) => {
  if (!currentNode.value) {
    return []
  }
  const res = await queryPage({ menuId: currentNode.value.id, pageNo: page, pageSize: limit })
  return res.data
};

const queryMenuInfo = async () => {
  const res = await queryAllTree()
  menuTree.value = res.data!
  if (currentNode.value) {
    onNodeClick(res.data!.find(e => e.id == currentNode.value!.id)!)
  } else {
    onNodeClick(menuTree.value[0])
  }
}

const reload = () => {
  tableRef.value?.reload()
}

const delMenu = async (id: string) => {
  const res = await del(id)
  if (res.code == 200) {
    EleMessage.success("删除成功")
    queryMenuInfo()
  }
}


const delButton = async (id: string) => {
  const res = await delPer([id])
  if (res.code == 200) {
    EleMessage.success("删除成功")
    reload()
  }
}

const openMenuEdit = (data?: SysMenu) => {
  if (data) {
    currentMenu.value = data
  } else {
    currentMenu.value = null
  }
  showMenuEdit.value = true
}

const openButtonEdit = (data?: SysPermission) => {
  if (data) {
    currentButton.value = data
  } else {
    currentButton.value = null
  }
  showButtonEdit.value = true
}

const onNodeClick = (data: SysMenu) => {
  currentNode.value = data
  treeRef.value?.setCurrentKey(data.id);
  tableRef.value?.reload()
}

onMounted(() => {
  queryMenuInfo()
})

</script>

<style lang="scss" scoped>
.menu__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  span {
    font-size: 18px;
  }

  div {
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .el-icon {
    transition: transform 0.3s ease;
  }

  .el-icon:active {
    cursor: pointer;
    transform: rotate(180deg);
  }
}

.table-wrapper {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ccc;
  /* 外层边框 */
}

table {
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ccc;
  padding: 8px;
}

.menu-info-table tr td:first-child,
.menu-info-table tr td:nth-child(3) {
  background-color: #eeeeee;
  width: 20%;
}

:deep(.ele-card-body) {
  padding: 0px;
}
</style>
